<template>
  <div class="enrollment">
    <goBack :title="tabIndex == 0 ? '招生信息' : '大学推荐'"></goBack>
    <div class="enrollment-title">高帮帮圆梦大学</div>
    <div class="enrollment-subtitle">展人生画卷 划未来蓝图</div>
    <!-- 选择地区/年份 -->
    <div class="enrollment-wrap-title"><span></span>选择地区</div>

    <div class="enrollment-wrap-area enrollment-wrap-area1" v-for="item in info.city" :key="item">
      <div class="enrollment-wrap-area-item" :class="{ active: currentIndex == 0 }" @click="changeCity(0,'')">全部</div>
      <div class="enrollment-wrap-area-item" v-for="( project, index ) in item"
        :class="{ active: currentIndex == index + 1 }" :key="project" @click="changeCity(index + 1,project)">
        {{ project }}
      </div>
    </div>
    <div v-if="info.years && tabIndex == 0" class="enrollment-wrap-title"><span></span>选择年份</div>
    <div v-if="info.years && tabIndex == 0" class="areas">
       <div class="enrollment-wrap-area"
        :key="item" @click="changeYear(0,'')">
        <div class="enrollment-wrap-area-item" :class="{ active: currentYearIndex == 0 }" >全部</div>
      </div>
      <div class="enrollment-wrap-area"  v-for="(item, index) in info.years"
        :key="item" @click="changeYear(index+1,item)">
        <div class="enrollment-wrap-area-item" :class="{ active: currentYearIndex == index + 1 }">{{ item }}</div>
      </div>
    </div>

    <div class="enrollment-wrap-title"><span></span>招生消息</div>
    <div class="schools-wrap" v-for="(item, index) in info.list" :key="item">
      <schoolProject :introduce="item" :index="index" :type="tabIndex == 0 ? 'zs' : ''" :bg="projectImg2"></schoolProject>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
import goBack from '../../components/goBack.vue';
import { getAdmissions, getSchools } from '../../api/apiList/homePage.js';
import { onMounted, ref, reactive } from 'vue';
import schoolProject from '../tabDetail/components/schoolProject.vue';
import  projectImg2 from '../../assets/images/tabdetail-projectImg2.png'
const route = useRoute();
const tabIndex = route.query.tabIndex;
const router = useRouter();
const currentIndex = ref(0)
const currentYear = ref('')
const currentYearIndex = ref(0)

const goToDetail = (index) => {
  router.push({ path: '/schoolDetail', query: { tabIndex: index } });
};
let info = ref({});
let currentCity = ref('');

const changeCity = (index,project) => {
  currentIndex.value = index
  currentCity.value = project
  if (tabIndex == 0) {
    getAdmissionsList(currentCity.value,currentYear.value)
  } else {
    getSchoolsList(currentCity.value)
  }
}
const changeYear = (index,item) => {
  currentYearIndex.value = index
  currentYear.value = item
  getAdmissionsList(currentCity.value,item)
}

onMounted(async () => {
  // 获取列表数据 0招生信息 1大学推荐
  if (tabIndex == 0) {
    getAdmissionsList()
  } else {
    getSchoolsList()
  }
});
const getAdmissionsList = (city = "", years = "") => {
  getAdmissions({ city, years }).then((res) => {
    const { result } = res;
    info.value = result;
  });
}
const getSchoolsList = (city = "") => {
  getSchools({ city }).then((res) => {
    const { result } = res;
    info.value = result;
  });
}
</script>

<style lang="less" scoped>
.enrollment {
  background-image: url('../../assets/images/enrollment-bg.png');
  background-size: 100%;
  background-repeat: no-repeat;

  .active {
    background: #cacdfe !important;
    color: #fff;
  }

  .areas {
    padding: 0 18px;
    display: grid;
    grid-template-columns: 108px 108px 108px;
    grid-column-gap: 27px;
  }

  .enrollment-title {
    padding: 0 18px;
    font-size: 21px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000493;
    line-height: 29px;
    letter-spacing: 1px;
    padding-top: 137px;
    margin-bottom: 4px;
  }

  .enrollment-subtitle {
    padding: 0 18px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #4347d3;
    line-height: 20px;
    letter-spacing: 4px;
    margin-bottom: 46px;
  }

  .enrollment-wrap-title {
    padding: 0 18px;
    display: flex;
    align-items: center;
    margin-top: 13px;

    span {
      width: 3px;
      height: 17px;
      background: #8487e3;
      border-radius: 2px;
      margin-right: 3px;
    }

    font-size: 16px;
    font-family: PingFangSC-Medium,
    PingFang SC;
    font-weight: 500;
    color: #000000;
    line-height: 22px;
    letter-spacing: 4px;
    margin-bottom: 16px;
  }

  .schools-wrap {
    padding: 10px 5px 0 18px;
    margin: 20px 0;
  }
}

.enrollment-wrap-area1 {
 padding: 0 18px;
    display: grid;
    grid-template-columns: 108px 108px 108px;
    grid-column-gap: 27px;
}
.enrollment-wrap-area {
  .enrollment-wrap-area-item {
    width: 108px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    background: #FFFFFF;
    border-radius: 3px;
    border: 2px solid rgba(140, 115, 255, 0.3);
  }
}
</style>
